<template>
    <div class="app-container">
        <div style="margin-bottom: 10px;">
            <el-button @click="dialogVisible = true" type="danger" size="mini" icon="el-icon-upload2">
                导入Excel
            </el-button>
            <el-button @click="exportData" type="primary" size="mini" icon="el-icon-download">
                导出Excel
            </el-button>
        </div>

        <el-dialog title="数据字典导入" :visible.sync="dialogVisible" width="30%">
            <el-form>
                <el-form-item label="请选择Excel文件">
                    <el-upload :auto-upload="true" :multiple="false" :limit="1" :on-exceed="fileUploadExceed"
                        :on-success="fileUploadSuccess" :on-error="fileUploadError"
                        :action="BASE_API + '/admin/core/dict/import'" name="file"
                        accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">
                    取消
                </el-button>
            </div>
        </el-dialog>

        <el-table :data="list" border row-key="id" lazy :load="load">
            <el-table-column label="名称" align="left" prop="name" />
            <el-table-column label="编码" prop="dictCode" />
            <el-table-column label="值" align="left" prop="value" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="openAddCategoryDialog(scope.row)"
                        icon="el-icon-plus">增加</el-button>
                    <el-button v-if="scope.row.parentId !== 1" size="mini" type="danger" @click="removeById(scope.row.id)"
                        icon="el-icon-delete">删除</el-button>
                    <el-dialog title="新增加分类" :visible.sync="dialogFormVisible" width="30%">
                        <el-form :model="form">
                            <el-form-item label="父类名称" :label-width="formLabelWidth">
                                <el-input v-model="form.parentName" autocomplete="off" disabled
                                    style="width: 50%;"></el-input>
                            </el-form-item>
                            <el-form-item label="子类名称" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off" style="width: 50%;"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer" style="text-align: right;">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addCategory">确 定</el-button>
                        </div>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>
  
<script>
import dictApi from '@/api/core/dict'

export default {
    data() {
        return {
            dialogVisible: false,
            BASE_API: process.env.VUE_APP_BASE_API,
            list: [],
            dialogFormVisible: false,
            formLabelWidth: '120px',
            selectedParentId: null,
            form: {
                parentName: "",
                name: ""
            }
        }
    },

    created() {
        this.fetchData()
    },

    methods: {

        fetchData() {
            dictApi.listByParentId(1).then(response => {
                this.list = response.data.dictList
            })
        },

        load(tree, treeNode, resolve) {
            dictApi.listByParentId(tree.id).then(response => {
                resolve(response.data.dictList)
            })
        },

        fileUploadExceed() {
            this.$message.warning('只能选取一个文件')
        },

        fileUploadSuccess(response) {
            if (response.code === 0) {
                this.$message.success('数据导入成功')
                this.dialogVisible = false
                this.fetchData()
            } else {
                this.$message.error(response.message)
            }
        },

        fileUploadError(error) {
            this.$message.error('数据导入失败')
        },

        exportData() {
            window.location.href = this.BASE_API + '/admin/core/dict/export'
        },

        openAddCategoryDialog(row) {
            this.selectedParentId = row.id;
            this.form.parentName = row.name;
            this.form.name = "";
            this.dialogFormVisible = true;
        },

        addCategory() {
            dictApi
                .addCategory(this.selectedParentId, this.form.name)
                .then(response => {
                    if (response.code === 0) {
                        this.$message.success("分类添加成功");
                        window.location.reload();
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(error => {
                    console.error("添加分类失败", error);
                    this.$message.error("添加分类失败");
                })

            this.dialogFormVisible = false;
            this.form.parentName = "";
            this.form.name = "";
        },

        removeById(id) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    dictApi.removeById(id).then((response) => {
                        this.$message.success(response.message);
                        window.location.reload();
                    });
                })
                .catch((error) => {
                    this.$message.info('取消删除');
                });
        }
    }
}
</script>